SVG要素の重なり順を動的に変える #d3.js |
您所在的位置：网站首页 › svg z-index › SVG要素の重なり順を動的に変える #d3.js |
|
SVG要素にz-indexが使えないことで一瞬戸惑ってしまいますが、要素の並び順＝重なり順であるので、要素を並び替えればいい。 ということでそれが実現できるSVG-Z-ORDERを利用します。 利用パッケージSVG-Z-ORDER https://takamin.github.io/svg-z-order/ https://takamints.hatenablog.jp/entry/npm-svg-z-order-js 機能 SVGZElement.toTop() - 指定した要素の並び順を一番先頭に持ってくる（一番手前に表示される） SVGZElement.toBottom() - 指定した要素の並び順を一番末尾へ変更する（一番後ろに表示される） SVGZElement.moveUp(element/n) - 指定されたターゲット要素の前またはn回、要素を手前へ移動する SVGZElement.moveDown(element/n) - 指定されたターゲット要素の後またはn回、要素を奥へ移動する SVGZElement.moveTo(element/index) - Moves the element to the specified position.ターゲット要素を指定された場所へ移動する コード例 require使う場合 var svgz = require("svg-z-order"); var g = svg.getElementById("foo"); svgz.element(g).toTop(); require使えない／使わない場合読み込みます。 D3.jsとあわせて利用し、マウスオーバーした要素の重なり順を一番手前にするには、たとえばこんな感じで。 .on("mouseover", function() { var d3g = d3.select(this); svgz_element(d3g.node()).toTop(); }) |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |